<template>
    <div class="sidebar-layout-wrapper">
        <a-layout class="layout-container-box">
            <a-layout-header class="layout-header-box"
                ><Header
            /></a-layout-header>
            <a-layout>
                <a-layout-sider class="layout-sider-box">
                    <Menus />
                </a-layout-sider>
                <a-layout-content class="layout-content-box">
                    <!-- <router-view></router-view> -->
                    <keep-alive>
                        <router-view
                            v-if="$route.meta.isKeepAlive"
                        ></router-view>
                    </keep-alive>
                    <router-view v-if="!$route.meta.isKeepAlive"></router-view>
                </a-layout-content>
                <!-- <a-layout-footer>Footer</a-layout-footer> -->
            </a-layout>
        </a-layout>
    </div>
</template>

<script>
import Menus from "../components/menus";
import Header from "../components/header";
export default {
    name: "sidebarLayout",
    components: {
        Menus,
        Header,
    },
    mounted() {},
    data() {
        return {};
    },
    methods: {},
};
</script>

<style lang="less" scoped>
.sidebar-layout-wrapper {
    ::v-deep .ant-layout-sider-children {
        // height: 100vh;
    }
    height: 100%;
    .layout-container-box {
        height: 100%;
    }
    .layout-header-box {
        margin-bottom: 2px;
        padding: 0 20px;
        // background-color: #082254;
        background-color: var(--main-body-bg-color);
    }
    .layout-sider-box {
        // height: 100%;
        // background-color: #082254;
        background-color: var(--main-body-bg-color);
    }
    .layout-content-box {
        margin: 0 0 0 5px;
        padding: 10px 20px;
        box-sizing: border-box;
        border: 1px solid #e8e8e8;
        background-color: #fff;
    }
}
</style>
